<template ref="dorm_main">
    <el-container style="height: 90vh; border: 1px solid #eee">
        <el-aside width="160px">
            <el-row>
                <h4><a href="#/dorm_building">宿舍楼</a></h4>
                <el-menu router :default-active="defaultIndex">
                    <el-menu-item v-for="(building,index) in buildings" :key="building.id"
                                  :index="'/dorm_list/'+building.id">
                        <i class="el-icon-location"></i>
                        <span slot="title" data-toggle="tooltip" :title="building.remark">{{building.name}}</span>
                    </el-menu-item>
                </el-menu>
            </el-row>
        </el-aside>
        <router-view  @emitindex="setIndex()" :buildings="buildings"></router-view>
    </el-container>
</template>
<script>
    export default{
        data(){
            return {
                buildings: null,
                defaultIndex:''
            }
        },
        methods:{
            setIndex(val){
              this.defaultIndex="/dorm_list/"+this.$route.params.building_id;
          }
        },
        created(){
            axios.get('api/v1/building').then(result => {
                this.buildings = result.data;
            });
        }
    }
</script>
